<template>
  <!-- 这是账户信息页面，包含订单、个人信息 -->
  <div id="account">
    <el-container>
      <el-header><Header></Header></el-header>
      <el-main>
        <div class="main_frame">
          <div class="left_frame">
            <div class="list">
              <div class="list_order">
                <h4>{{$t("accountInformation.orderCenter")}}</h4>
                <ul>
                  <li><router-link to="/accountInformation/myorder">{{$t("MyOrder.MOrder")}}</router-link></li>
                </ul>
              </div>
              <div class="list_account">
                <h4>{{$t("accountInformation.accountManagement")}}</h4>
                <ul>
                  <li><router-link to="/personalDetails">{{$t("accountInformation.personalDetails")}}</router-link></li>
                  <li><router-link to="/changePassword">{{$t("changePassword.Change")}}</router-link></li>
                  <li><router-link to="/pointsExchange">{{$t("accountInformation.creditsExchange")}}</router-link></li>
                  <li><router-link to="/accountInformation/addressManagement">{{$t("accountInformation.receivingAddressManagement")}}</router-link></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="right_frame">
            <router-view />
          </div>
        </div>
      </el-main>
      <el-footer><Footer></Footer></el-footer>
    </el-container>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
export default {
  components: {
    Footer,
    Header
  },
}
</script>

<style lang="less" scoped>
.el-header {
    font-size: 0;
}
.container {
  max-width: 950px;
  margin: auto;
  margin: 50px 0px;
}
.el-header, .el-footer {
  color: #333;
  text-align: center;
  height: auto!important;
  padding: 0px;
}
.el-main {
  color: #333;
  padding: 0px;
  // 计算减去头部和底部的高度，就是中间的高度
  min-height: calc(100vh - 221px - 61px)
}
#account {
  min-width: 1190px;
}
.main_frame {
  width: 1190px;
  height: 100%;
  margin: auto;
  display: flex;
  padding: 30px 0px;
  justify-content: left;
}
.left_frame {
  width: 250px;
  .list {
    padding: 30px 55px;
    padding-top: 10px;
    h4 {
      margin: 15px 0px;
    }
    li {
      // line-height: 30px;
      padding: 8px 0px;
    }
    a {
      color: #666;
      text-decoration: none
    }
    a:hover {
      color: red;
    }
    a:link {
      text-decoration: none;
    }
    .list_order {
      margin-bottom: 30px;
      h4 {
        color: #555;
        text-transform: none;
      }
    }
  }
}
.right_frame {
  flex: 1;
  padding: 20px;
}
.list_account {
  h4 {
    color: #555;
    text-transform: none;
  }
}
</style>